<template>
  <div>
    <el-card class="box-card" style="text-align: center;margin: -55px auto;background: #f6f6f7;">
      <el-container>
        <app-header></app-header>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="width: 1200px;margin: 0 auto;">
            <el-breadcrumb-item>您所在的位置：</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>特色资源</el-breadcrumb-item>
            <el-breadcrumb-item>河道详情</el-breadcrumb-item>
          </el-breadcrumb>
          <el-row style="width: 1200px;margin: 0 auto;" :gutter="24">
            <el-col :span="2" style="margin-top: 30px;">
              <span>区间：</span>
            </el-col>
            <el-col :span="22" style="margin-top: 30px;">
              <template>
                <el-checkbox-group v-model="checked" @change="handleCheckedChange">
                  <el-checkbox v-for="(item,index) in interval" :key="index" :label="item.id"
                               style="margin-right: 10px;">
                    {{item.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
            </el-col>
          </el-row>
          <el-row style="width: 1200px;margin: 0 auto;margin-top: 15px;" :gutter="24">
            <el-col :span="2">
              <span>范围：</span>
            </el-col>
            <el-col :span="22" style="float: left;">
              <div class="block">
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  align="right"
                  @change="dateChange()"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
          <el-row style="width: 1200px;margin: 0 auto;">
            <el-col style="float: right;" :span="6">
              <el-button type="primary" plain @click="serch()">查询</el-button>
              <el-button type="primary" plain @click="exportData()">导出</el-button>
            </el-col>
          </el-row>
          <el-card>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
                prop="intervalName"
                label="区间">
              </el-table-column>
              <el-table-column
                prop="riverName"
                label="河道名">
              </el-table-column>
              <el-table-column
                prop="siteName"
                label="站点名">
              </el-table-column>
              <el-table-column
                prop="siteId"
                label="站点id">
              </el-table-column>
              <el-table-column
                prop="time"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="waterLevel"
                label="水位">
              </el-table-column>
              <el-table-column
                prop="flow"
                label="流量">
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="更新时间">
              </el-table-column>
            </el-table>
          </el-card>
          <div class="box-card" style="margin-top: 35px;">
            <el-pagination
              background
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              style="float: right;margin-top: -15px;"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import myHeader from '../../components/myHeader'
import {selectPageRiver, selectInterval, downloadRiverFile} from '@/api/news'
export default {
  data () {
    return {
      checked: [],
      interval: {},
      // 总数据
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 50, 100],
      // 默认每页显示的条数（可修改）
      pageSize: 10,
      type: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value2: '',
      startTime: '',
      endTime: ''
    }
  },
  components: {
    'app-header': myHeader
  },
  created () {
    this.selectInterval()
    this.pageRiverClick()
  },
  methods: {
    // 按条件搜索
    serch () {
      this.pageRiverClick()
    },
    exportData () {
      console.log(this.tableData)
      const data = {
        interval: this.checked,
        startTime: this.startTime,
        endTime: this.endTime
      }
      downloadRiverFile(data).then(res => {
        if (res.status === 200) {
          console.log(res.headers['content-disposition'])
          let blob = res.data
          let reader = new FileReader()
          reader.readAsDataURL(blob)
          reader.onload = (e) => {
            let a = document.createElement('a')
            // a.download = res.headers.filename
            a.download = window.decodeURI(res.headers['content-disposition'].split('=')[1], 'UTF-8')
            a.href = e.target.result
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
          }
        }
      })
    },
    // 修改日期
    dateChange () {
      // this.$message.warning(this.value2)
      const temp = this.value2.toString().split(',')
      this.startTime = temp[0]
      this.endTime = temp[1]
    },
    // 点击方法
    pageRiverClick () {
      this.getData(this.pageSize, this.currentPage)
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (pageSize) {
      // 改变每页显示的条数
      this.pageSize = pageSize
      // 点击每页显示的条数时，显示第一页
      this.getData(pageSize, 1, this.type)
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange (current) {
      // 改变默认的页数
      this.currentPage = current
      // 切换页码时，要获取每页显示的条数
      this.getData(this.pageSize, current)
    },
    // 将页码，及每页显示的条数以参数传递提交给后台
    getData (pageSize, current) {
      // 这里使用axios，使用时请提前引入
      const page = {
        // 每页显示的条数
        size: this.pageSize,
        // 显示第几页
        current: current,
        // 区间编号
        interval: this.checked,
        startTime: this.startTime,
        endTime: this.endTime
      }
      console.log(page)
      selectPageRiver(page).then(res => {
        if (res.data.status === 1005) {
          this.tableData = res.data.data.records
          this.totalCount = res.data.data.total
        } else {
          this.tableData = []
          this.totalCount = 0
          this.$message.error('出错了！')
        }
      })
    },
    /* 点击信息跳转详情页 */
    colClick (v) {
      this.$router.push({path: '/details'})
    },
    // 查询区间种类
    selectInterval () {
      selectInterval().then(res => {
        if (res.data.status === 1005) {
          // this.$message.success('查询成功')
          this.interval = res.data.data
          console.log(this.interval)
        } else {
          this.$message.warning('查询失败')
        }
      })
    },
    handleCheckedChange (value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #1a75ce;
  text-align: center;
  line-height: 60px;
}
.el-menu{
  border: none;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  //background: rgb(246, 246, 247);
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
>>> .el-checkbox__label {
  display: inline-block;
  padding-left: 5px;
  line-height: 19px;
  font-size: 14px;
}
</style>
